<template>
	<view class="content">
		<cu-custom :isBack="true" textRight="true" type="custom-recuit">
			<block slot="backText" class="">
				<view class="titilestyle">
					{{title}}
				</view>
				
			</block>
		</cu-custom>


		<view class="content ">
			<image class="head-img " :src="res+'/static/motorcycles/img/top.png'" mode="widthFix"></image>


			<view class="list">
				<scroll-view scroll-x class="taber  ">
					<view class="left ">

					</view>
					<view class=" item" v-for="(tab,i) in taber" :key="i" :class="tabIndex==i?'hover':'nohover'"
						@click="changeTab(i)">
						{{tab.name}}
					</view>

				</scroll-view>


				<scroll-view scroll-y="true" class="box ">
					<view class="item flex align-center " v-for="(item,index) in list" :key="index">
						<view class="left">
							<image :src="res+item.icon" mode="aspectFit"></image>
						</view>
						<view class="center ">
							<view class="top text-cut">
								{{item.title}}
							</view>
							<view class="bottom">
								{{item.desc}}
							</view>

						</view>
						<view class="right  text-right">
							<view class="top">
								{{item.price*item.discount}}元
							</view>
							<view class="buttom text-discount">
								{{item.price}}元
							</view>

						</view>
						<view class="left-top">

						</view>



					</view>
				</scroll-view>

			</view>








		</view>

	</view>
</template>

<script>
	import {
		getData
	} from "@/static/motorcycles/api.js"
	export default {
		data() {
			return {
				title: "活动中心",
				tabIndex: 0,
				res: this.apiHost + "/static/otherApp/",
				taber: [

					{
						name: "电单车"
					},
					{
						name: "自行车"
					},
					{
						name: "观光车"
					},
					{
						name: "滑板车"
					},
					{
						name: "校外大巴"
					}

				],
				list: []
			}
		},
		onLoad() {
			this.getList();
		},
		methods: {
			changeTab(i) {
				this.tabIndex = i;
				this.getList();
			},
			getList(){
				console.log("tab"+this.tabIndex)
				getData(this.tabIndex).then(r=>{
					this.list=r;
					console.log(r)
				})
			}
		}


	}
</script>

<style lang="scss">
	.content {
		$itemW: calc(100vw*(670/750));
		width: 100%;
		background-color: white;

		.head-img {
			margin: auto;
			width: $itemW;

		}

		.head {
			height: calc(100vw*(220/750));
			background: #F7F7F7;
			border-radius: 20rpx;
			position: relative;
			margin: 20rpx 40rpx;
			background: linear-gradient(90deg, #295D9C, #5699E9);
			box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.05);

			.top {
				height: calc(100vw*(40/750));
				background: #000000;
				opacity: 0.1;
			}

			.botdy {
				height: calc(100vw*(140/750));

				.left {
					width: calc(100vw*(120/750));
					height: inherit;
				}

				.right {}
			}

			.foot {
				width: calc(100vw*(120/750));
				height: calc(100vw*(40/750));
				position: absolute;
				bottom: 0;
				left: 0;
				background: linear-gradient(90deg, #FFFFFF);
				opacity: 0.3;
			}
		}

		.list {

			.taber {
				width: 100vw;
				height: 60rpx;
				white-space: nowrap;
				margin-top: 40rpx;
				line-height: 60rpx;

				.left {
					display: inline-block;

					width: calc(100vw*(59/750));
				}

				.item {
					height: inherit;
					line-height: 60rpx;
					display: inline-block;
					margin-right: 34rpx;
				}

				font-family: PingFang SC;

				.hover {
					font-size: 32rpx;
					font-weight: 800;
					color: #333333;
				}

				.nohover {
					font-size: 28rpx;
					color: #999999;
					font-weight: 500;
				}
			}

			.box {
				width: $itemW;
				margin: auto;

				.item {
					background: #F7F8FC;
					border-radius: 40rpx;
					margin-top: 20rpx;
					position: relative;
					height: calc(100vw*(160/750));
					padding: 0 36rpx 0 36rpx;

					.left,
					.right {
						width: calc(100vw*(114/750));
						min-height: calc(100vw*(76/750));

						image {
							max-width: calc(100vw*(114/750));
							max-height:calc(100vw*(100/750));
						}
						.top{
							font-size: 32rpx;
							font-weight: 800;
							color: #D92D2D;
						}
						.buttom{
							font-size: 28rpx;
							font-weight: 500;
							color: #999999;
							margin-top: 20rpx;
							text-decoration: line-through;
						}

						z-index: 1;
					}

					.center {
                        margin-left: 20rpx;
						width: calc(100vw*(432/750));

						.top {
							font-size: 32rpx;
							font-weight: 800;
							color: #333333;
						}
						.bottom{
							font-size: 28rpx;
							font-weight: 500;
							color: #999999;
							margin-top: 20rpx;
						}

					}

					.left-top {
						position: absolute;
						z-index: 0;
						top: 0;
						left: 0;
						background-color: #EAECF8;
						width: calc(100vw*(126/750));
						height: inherit;
						border-radius: 40rpx 50rpx 600rpx 40rpx;

					}
				}
			}
		}

	}
</style>
